<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
    <el-tab-pane label="专家" name="first">
      <expertList
        :volunteerList="volunteerList"
        @onClickOptionItem="onClickOptionItem"
        :isShowOptionItem="false"
      >
      </expertList>
    </el-tab-pane>
    <el-tab-pane label="学生" name="fourth">
      <studentList
        :volunteerList="volunteerList"
        @onClickOptionItem="onClickOptionItem"
        :isShowOptionItem="false"
      ></studentList>
    </el-tab-pane>
    <div class="right">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="getzybList"
          @current-change="getzybList"
        />
      </el-config-provider>
    </div>
  </el-tabs>
  <volundeerDetails ref="volundeerDetailsRef"></volundeerDetails>
</template>
<script setup>
import { ref } from 'vue';
import studentList from '/src/views/leader/Filling/module/studentList.vue';
import expertList from '/src/views/leader/Filling/module/expertList.vue';
import volundeerDetails from './volunteerDetails.vue';
import { zyList } from '@/api/leader/Filling.js';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

const props = defineProps({
  studentData: {
    type: Object,
    default: {},
  },
});

const activeName = ref('first');
const volunteerList = ref([]);
const isRequest = ref(false);
const volundeerDetailsRef = ref(null);

const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

getzybList();
// 获取志愿表列表
function getzybList() {
  if (isRequest.value) return;
  isRequest.value = true;

  let data = {
    fronttype: 3,
    page: pageData.page,
    pageSize: pageData.pageSize,
    studentId: props.studentData.studentId,
    mod: 1,
  };

  if (activeName.value == 'first') {
    data['createFrom'] = '1,2';
  } else {
    data['createFrom'] = '0';
    data['isTeacherSee'] = 1;
  }

  zyList(data)
    .then((res) => {
      isRequest.value = false;
      let data = res.data;
      if (pageData.page == 1) {
        volunteerList.value = data.data;
      } else {
        volunteerList.value = [...volunteerList.value, ...data.data];
      }

      pageData.total = data.total;
    })
    .catch(() => {
      isRequest.value = false;
    });
}

function handleClick(val) {
  // 切换组件信息
  if (activeName.value != val.paneName) {
    activeName.value = val.paneName;
    getzybList();
  }
}

/**
 * 点击志愿表操作选项
 * @param {Number} index 下标onClickOptionItem
 * @param {Number} type 操作类型 0-查看 1-最终方案 2-同步至学生 3-删除 4-复制到专家
 */
function onClickOptionItem(index) {
  let volunteer = volunteerList.value[index];
  let body = {
    index: volunteer.index,
    zy_type: volunteer.zy_type,
    studentData: props.studentData,
  };

  volundeerDetailsRef.value.openChange(body);
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog__footer) {
  padding: 40px !important;
}
.tab {
  position: relative;
}
.right {
  margin-top: 20px;
  position: fixed;
  right: 20px;
  bottom: 10px;
}
</style>
